//
// Action Menus
// --------------------------------------------------

#menuview {
  .navbar {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
  }
  .navbar-header {
    float: left;
  }
  .navbar-brand {
    float: none;
    img {
      height: @navbar-height;
      display: inline;
    }
  }

  .navbar-nav {
    float: right;

    &.navbar-left > li {
      float: left;
    }

    &.navbar-right {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }
  .navbar-form {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    .box-shadow(none);
  }
  @media (max-width: @screen-sm-min) {
    .dropdown-menu .divider {
      background-color: @navbar-default-border;
    }
    .navbar-left {
      float: left;
      margin-left: @navbar-padding-horizontal;
      margin-right: @navbar-padding-horizontal;
      /* Without this rule, the left navbar will cause unexpected layout shifts even when it's empty. */
      &:not(:has(> *)) {
        margin-top: 0;
      }  
    }
  }
}

@media (max-width: @screen-sm) {
  // FIX Bootstrap: Reset custom display for dropdowns inside navbars
  #xwikimainmenu {
    & .open .dropdown-menu {
      /* Replace the custom embedded display by having the dropdown outside the nav. */
      position: absolute;

      /* Reset overwritten properties with Bootstrap variables. */
      border: 1px solid @dropdown-border;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

      & > li > a {
        color: inherit;

        &:hover, &:focus {
          background-color: @dropdown-link-hover-bg;
        }
      }

      & .divider {
        background-color: @dropdown-divider-bg;
      }
    }

    & .navbar-nav {
      /* Fix the alignment of the dropdown with the end of the topmenu. */
      margin-bottom: 0;
    }
  }
}
// Authentication buttons ========================================================
// Reduce the spacing between both items if there's both
li:has(#tmLogin) + li #tmRegister {
  padding-right: 8px;
}
li:has(+ li #tmRegister) #tmLogin {
  padding-left: 8px;
}

// Quick search ========================================================

#globalsearch {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin: 0;
  padding: 0;

  // Remove the bootstrap border on the form when the screen is small
  @media (max-width: @screen-sm-max) {
    border: none;
  }

  .btn {
    // When the global search is active, the button has an "active"-kind color
    background-color: @navbar-default-link-active-bg;
    color: @navbar-default-link-active-color;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 10px @navbar-padding-horizontal;
    @media (min-width: @grid-float-breakpoint) {
      padding: @navbar-padding-vertical @navbar-padding-horizontal;
    }
    &:hover,
    &:focus {
      background-color: @navbar-default-link-hover-bg;
      color: @navbar-default-link-hover-color;
      box-shadow: none;
    }
    &:active {
      background-color: @navbar-default-link-active-bg;
      color: @navbar-default-link-active-color;
    }
  }

  // The global search input
  #headerglobalsearchinput { // we need to be that specific to be applied
    border-radius: 0;
    border: 0;
    min-width: 0;
    transition: width 300ms ease-in-out, padding 300ms ease-in-out;
    width: 200px; // we need to set a width in pixels otherwise the transition is not applied nicely
  }

  // When the global search is closed
  .btn[aria-expanded='false'] {
    background-color: @navbar-default-bg;
    color: @navbar-default-link-color;
    border: 0;
    // Except when it is hovering
    &:hover,
    &:focus {
      background-color: @navbar-default-link-hover-bg;
      color: @navbar-default-link-hover-color;
      box-shadow: none;
    }
    &:active {
      background-color: @navbar-default-link-active-bg;
      color: @navbar-default-link-active-color;
    }
    // The input has no width (it's hidden basically, but we need to set the width to 0 to have the nice transition)
    & + #headerglobalsearchinput { // we need to be that specific to be applied
      width: 0;
      padding: 0;
    }

    // Hides the search result when the focus is not on the search field.
    & ~ .searchSuggest {
      opacity: 0;
      max-height: 0;
    }
  }
}

@media (min-width: @screen-sm-min) {
  .navbar-nav > li > a {
    /* When the page name is long, add ellipsis. */
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// Navbar avatar ==========================================================

.navbar-avatar {
  > a {
    max-height: @navbar-height;

    > img {
      @avatar-size: floor((ceil((@navbar-height / 2)) / 2)) * 2;
      border-radius: @thumbnail-border-radius;
      height: @avatar-size;
      margin-top: -@navbar-padding-vertical + (@navbar-height / 2) - (@avatar-size / 2);
      vertical-align: middle;
      width: @avatar-size;
    }
  }
}

// Icon in a navbar  ======================================================

.icon-navbar {
  cursor: pointer;
}

// Navbar dropdown ========================================================

@media (min-width: @screen-sm-min) {
  // We use mixin guards to simulate conditional assignment. We need the hover and active background color to fall back
  // on the default background color if transparent (e.g. if the user doesn't specify it in the color theme).
  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and (@hover-bg = transparent) {
    // Make sure the hover background color falls back on the default background color.
    .navbar-dropdown(@bg, @bg, @active-bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and (@active-bg = transparent) {
    // Make sure the active background color falls back on the default background color.
    .navbar-dropdown(@bg, @hover-bg, @bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and not (@active-bg = transparent) {
    @navbar-dropdown-contrast: 30%;

    @separator-color: contrast(@bg,
      darken(@bg, @navbar-dropdown-contrast),
      lighten(@bg, @navbar-dropdown-contrast));
    @separator-hover-color: contrast(@hover-bg,
      darken(@hover-bg, @navbar-dropdown-contrast),
      lighten(@hover-bg, @navbar-dropdown-contrast));
    @separator-active-color: contrast(@active-bg,
      darken(@active-bg, @navbar-dropdown-contrast),
      lighten(@active-bg, @navbar-dropdown-contrast));

    > a {
      /**
       * We have two anchors in the same menu entry: one has the label and the caret for extra small screens (phones,
       * where the menu is displayed vertically) and the other has the caret for larger screens (where the menu is
       * displayed horizontally).
       */
      float: left;
    }
    > .dropdown-split-left {
      /* Display it closer to the menu toggle. */
      padding-right: ceil((@navbar-padding-horizontal / 2));
      > .caret {
        /* Hide the caret used for extra small screens. */
        display: none;
      }
      /* The separator between the label and the toggle. */
      &:after {
        background-color: @separator-color;
        content: "";
        display: inline-block;
        height: @line-height-computed;
        position: absolute;
        right: 0;
        top: @navbar-padding-vertical;
        width: 1px;
      }
      &:hover:after {
        /* Update the separator color based on the hover color. */
        background-color: @separator-hover-color;
      }
      &:focus:after,
      &:active:after {
        /* Update the separator color based on the active color. */
        background-color: @separator-active-color;
      }
    }
    > .dropdown-split-right {
      /* Display it closer to the menu label. */
      padding-left: ceil((@navbar-padding-horizontal / 2));
      > .caret {
        /* Reset the left margin for the caret used on large screens. */
        margin-left: 0;
      }
    }
    &.open > .dropdown-split-left {
      /* Highlight only the toggle (right side) when the menu is open. */
      background-color: transparent;
      color: @navbar-default-link-color;
      &:hover {
        /* The link can be hovered when the menu is open because only the toggle is active. */
        background-color: @navbar-default-link-hover-bg;
        color: @navbar-default-link-hover-color;
      }
    }
  }

  .navbar-nav > .dropdown-split {
    .navbar-dropdown(@navbar-default-bg, @navbar-default-link-hover-bg, @navbar-default-link-active-bg)
  }
}

// XWikiMainMenu dropdown menus =======================================

#xwikimainmenu .dropdown-menu {
  background-color: @dropdown-bg;
}

// Content menu  ======================================================

// Used a mix of LESS variables in order to assure the content buttons
// have a styling more similar to breadcrumbs than buttons, while looking
// decent across the bundled color themes
.flat-buttons {
  .btn-default {
    background-color: @breadcrumb-bg;
    background-image: none;
    border-color: @dropdown-divider-bg;
    box-shadow: none;
    color: @dropdown-link-color;
    text-shadow: none;
  }

 .btn-default:hover, .btn-default:active, .btn-default:focus, .open .dropdown-toggle {
    border-color: darken(@dropdown-divider-bg, 10%);
  }
}

#contentmenu {
  .text-right();
  .flat-buttons();

  .dropdown {
    display: inline-block;
    font-size: @font-size-large;
    width: @font-size-large * 2.5;

    > a {
      color: @headings-color;
      padding: @font-size-large;
    }
  }
  a.btn.disabled {
    opacity: 1;
    .text-muted;
    background-color: transparent;
  }

  .btn-group > dl.dropdown-menu {
    & > dt.dropdown-header {
      &.sr-only {
        // Overwrite bootstrap default style that would take priority on .sr-only style
        padding: 0;
      }

      // Use the bootstrap style for our semantic architecture
      &:extend(li.dropdown-header);
      font-weight: initial;
    }

    & > dd:not(:last-child) {
      // Add a css separator under the section
      padding-bottom: 10px;
      border-bottom: 1px solid @dropdown-divider-bg ;
      margin-bottom: 10px;
    }

    & > dd > ul {
      // Remove default list style
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;

      & > li > a {
        // Use the bootstrap style for our semantic architecture
        &:extend(.dropdown-menu > li > a);
        &:hover, &:focus-within {
          &:extend(.dropdown-menu > li > a:hover);
        }
      }
    }
  }
}
